<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式表 -->
    <!-- <style>
        /* 选择器 + {一条/N条声明}  */
        p {

            color: red;
            font-size: 40px;
        }
    </style> -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!--  引入方式 -->
    <!-- 行内样式表 -->
    <!-- 优先级：行内样式表 > 内部样式表 -->
    <p style="color: blue;">hello world</p>
    <p>hello Three</p>
    <h1 style="color:blue; font-size: 80px;">你好</h1>

    <!-- 外部样式 -->
    <h1>hello CSS</h1>

    <!-- 类选择器 -->
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="play game">玩游戏</p>

    <!-- id选择器 -->
    <p id="random">随机</p>

    <!-- 后代选择器 -->
    <ul class="hobby">
        <li>吃饭</li>
        <li>睡觉</li>
        <li>玩游戏</li>
    </ul>

    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>
            玩游戏
            <a href="#">hello world</a>
        </li>
    </ol>

    <ol start="3">
        <li>原神</li>
        <li>王者荣耀</li>
        <li>和平精英</li>
    </ol>

    <!-- 伪类选择器 -->
    <a href="#">不跳转</a>

    <input type="button" value="按钮">

    <br>

    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>